<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>待认领订单列表</title>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/hotui/css/font-awesome.min.css" th:href="@{/resource/hotui/css/font-awesome.min.css}"
          rel="stylesheet">
    <!-- Morris -->
    <link href="../../resource/hotui/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/hotui/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="animated fadeInRight" th:replace="fragments/order_detail_front_fg::orderDetailCopy"
     style="padding:0 6px;position:fixed;width:100%;top: 0;z-index:101;">
    <div class="col-lg-12">
        <div class="ibox float-e-margins" style="margin-bottom:0;">
            <div class="ibox-title" style="padding: 14px 15px 11px;">
                <div class="form-inline">
                    <div class="form-group m-r-sm">
                        <label style="font-size: 17px; margin-top: 5px;">
                            订单-<span>20170110095434456651</span>

                            <span style="font-size: 13px;">
                                <span class="color-primary">已支付</span>
                                <span class="color-warning">待发货</span>
                            </span>
                        </label>
                    </div>
                    <button type="button"

                            onclick="handler.deliver('123213')" class="btn btn-success btn-sm">
                        发货
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:object="${order}" class="wrapper wrapper-content animated fadeInRight tooltip-demo" style="margin-top: 59px;">

    <input id="hdDealOrderId" th:value="*{orderPO.orderId}" type="hidden"/>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="tabs-container">
                    <ul class="nav nav-tabs" th:replace="fragments/order_detail_front_fg::orderDetailTab(0)">
                        <li class="active"><a href="order_detail.html">基本信息</a></li>
                        <li><a href="order_detail.html">收退款记录</a></li>
                        <li><a href="order_detail.html">发货记录</a></li>
                        <li><a href="order_detail.html">返利记录</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="ibox float-e-margins m-b-none">
                                            <div class="ibox-content p-xxs no-borders" style="border-top: none;">
                                                <label>商品列表：</label>
                                                <p style="height: 5px;"></p>
                                                <div style="max-height: 500px;overflow-y: auto">
                                                    <table class="table table-bordered table-center">
                                                        <thead>
                                                        <tr>
                                                            <!--                                                            <th>商品编号</th>-->
                                                            <th></th>
                                                            <th>商品名称</th>
                                                            <th>价格</th>
                                                            <th>购买数量</th>
                                                            <th>小计</th>
                                                            <th>发货状态</th>
                                                            <th>鉴定状态</th>
                                                            <th>售后状态</th>
                                                            <th sec:authorize="hasRole('ADMIN')">操作</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>

                                                        <tr th:each="orderItem:${order.orderItemPOS}">
                                                            <td>
                                                                <img style="width: 50px;border-radius: 10px;"
                                                                     th:src="${orderItem.goodsInfo.thumbnail}"/>
                                                            </td>
                                                            <!--                                                            <td th:text="${orderItem.goodsInfo.goodsBn}"></td>-->
                                                            <td th:text="${orderItem.goodsInfo.goodsName}"></td>
                                                            <td th:text="${orderItem.goodsInfo.price}">100.00</td>
                                                            <td th:text="${orderItem.num}">1</td>
                                                            <td th:text="${#numbers.formatDecimal(orderItem.goodsAmount(),1,2)}">
                                                                100.00
                                                            </td>
                                                            <td th:class="${orderItem.deliverStatusClass()}"
                                                                th:text="${orderItem.deliverStatus.desc}">待发货
                                                            </td>
                                                            <td
                                                                    th:text="${orderItem.identifyStatus!=null?orderItem.identifyStatus.desc:''}">
                                                                待鉴定
                                                            </td>
                                                            <td
                                                                    th:text="${orderItem.afterSaleStatus==null?'':orderItem.afterSaleStatus.desc}">
                                                                售后申请中
                                                            </td>
                                                            <td sec:authorize="hasRole('ADMIN')">
                                                                <a th:href="|javascript:orderHandler.rebates(${orderItem.id},'${orderItem.goodsInfo.goodsName}')|"
                                                                   href="javascript:orderHandler.rebates(1,'')">佣金及返利</a>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-8">
                                        <div class="ibox float-e-margins">
                                            <div class="ibox-content p-xxs no-borders">
                                                <label>订单详情：</label>
                                                <p style="height: 5px;"></p>
                                                <table class="table table-bordered order-detail-table">
                                                    <tbody>
                                                    <tr>
                                                        <th>订单号：</th>
                                                        <td>
                                                            <span th:text="*{subOrderId}">20170110095434456651</span>
                                                        </td>
                                                        <th>店铺：</th>
                                                        <td>
                                                            <span th:text="*{merchantPO.data.title}">郭孟稳的店</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th>订单类型：</th>
                                                        <td>
                                                            <span th:text="*{orderType.desc}">普通订单</span>
                                                        </td>
                                                        <th:block sec:authorize="hasRole('ADMIN')">
                                                            <th>商品总金额：</th>
                                                            <td>
                                                                <span th:text="*{goodsAmount}">100.00</span>
                                                            </td>
                                                        </th:block>
                                                    </tr>
                                                    <tr>
                                                        <th>下单日期：</th>
                                                        <td>
                                                            <span th:text="*{#temporals.format(createTime,'yyyy-MM-dd HH:mm:ss')}">2017/1/10 22:00:20</span>
                                                        </td>
                                                        <th>支付时间：</th>
                                                        <td>
                                                            <span th:text="${order.orderPO.payTime==null?'':#temporals.format(order.orderPO.payTime,'yyyy-MM-dd HH:mm:ss')}">2017/1/10 22:00:20</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th:block sec:authorize="hasRole('ADMIN')">
                                                            <th>订单金额：</th>
                                                            <td class="color-warning"
                                                                style="font-size: 14px; font-weight: bold;">
                                                                ￥<span th:text="*{finalAmount}">100</span>
                                                            </td>
                                                        </th:block>
                                                        <th:block sec:authorize="hasRole('MERCHANT')">
                                                            <th>结算金额：</th>
                                                            <td class="color-warning"
                                                                style="font-size: 14px; font-weight: bold;">
                                                                ￥<span th:text="*{payment()}">100</span>
                                                            </td>
                                                        </th:block>
                                                        <th>优惠金额：</th>
                                                        <td>
                                                            ￥<span th:text="*{pmtAmount}">0</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <th>运费：</th>
                                                        <td>
                                                            ￥<span th:text="*{freightAmount}">0</span>
                                                        </td>
                                                        <th:block sec:authorize="hasRole('ADMIN')">
                                                            <th>余额支付：</th>
                                                            <td>￥<span th:text="*{orderPO.balance}">0</span>
                                                            </td>
                                                        </th:block>
                                                    </tr>
                                                    <th:block sec:authorize="hasRole('ADMIN')">
                                                        <tr>
                                                            <th>一级佣金：</th>
                                                            <td>
                                                                ￥<span th:text="*{fatherRebate()}">0</span>
                                                            </td>
                                                            <th>二级佣金：</th>
                                                            <td>
                                                                ￥<span th:text="*{grantRebate()}">0</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>货款：</th>
                                                            <td>
                                                                ￥<span th:text="*{payment()}">0</span>
                                                            </td>
                                                        </tr>
                                                    </th:block>

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="ibox float-e-margins">
                                            <div class="ibox-content p-xxs no-borders">
                                                <label>收货人信息：</label>
                                                <p style="height: 5px;"></p>
                                                <table class="table table-bordered order-detail-table">
                                                    <tbody>
                                                    <tr>
                                                        <th>姓名：</th>
                                                        <td colspan="3"
                                                            th:text="${order.orderPO.receivingInfo!=null ? order.orderPO.receivingInfo.userName:'--'}"></td>
                                                    </tr>
                                                    <tr>
                                                        <th>手机：</th>
                                                        <td colspan="3"
                                                            th:text="${order.orderPO.receivingInfo!=null ? order.orderPO.receivingInfo.telNumber:''}"></td>
                                                    </tr>
                                                    <tr>
                                                        <th>收货地址：</th>
                                                        <td th:text="${order.orderPO.receivingInfo!=null ? order.orderPO.receivingInfo.fullAddress():''}"
                                                            colspan="3"></td>
                                                    </tr>
                                                    <tr th:if="*{userOrderStatus()!=null&&userOrderStatus().code==1}">
                                                        <td colspan="2">
                                                            <input id="hdShipUserName"
                                                                   th:value="${order.orderPO.receivingInfo!=null ? order.orderPO.receivingInfo.userName:'--'}"
                                                                   type="hidden">
                                                            <input id="hdShipTelNumber"
                                                                   th:value="${order.orderPO.receivingInfo!=null ? order.orderPO.receivingInfo.telNumber:'--'}"
                                                                   type="hidden">
                                                            <input id="hdProvinceCode"
                                                                   th:value="${order.orderPO.receivingInfo!=null ? order.orderPO.receivingInfo.provinceCode:''}"
                                                                   type="hidden">
                                                            <input id="hdCityCode"
                                                                   th:value="${order.orderPO.receivingInfo!=null ? order.orderPO.receivingInfo.cityCode:''}"
                                                                   type="hidden">
                                                            <input id="hdDistrictCode"
                                                                   th:value="${order.orderPO.receivingInfo!=null ? order.orderPO.receivingInfo.districtCode:''}"
                                                                   type="hidden">


                                                            <button class="btn-primary"
                                                                    onclick="orderHandler.modifyShipAddress()">修改收货地址
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script id="receivingInfo_modal" style="display: none" type="text/html">
    <div class="form-horizontal" style="width: 600px;">
        <div class="form-group">
            <label class="col-sm-2 control-label">收货人姓名:</label>
            <div class="col-sm-4">
                <div class="input-group">
                    <input name="receivingInfo_userName" id="receivingInfo_userName" value="" type="text"
                           class="form-control" placeholder="收货人姓名">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">收货人手机:</label>
            <div class="col-sm-4">
                <div class="input-group">
                    <input name="receivingInfo_telNumber" id="receivingInfo_telNumber" value="" type="text"
                           class="form-control" placeholder="收货人手机">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">城市:</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <select id="sltProvince" class="form-control input-s-sm">
                        <option>请选择</option>
                    </select>
                    <select id="sltCity" class="form-control input-s-sm">
                        <option>请选择</option>
                    </select>
                    <select id="sltDistrict" class="form-control input-s-sm">
                        <option>请选择</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">收货地址:</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input name="receivingInfo_address" style="width: 350px;" id="receivingInfo_address" value=""
                           type="text"
                           class="form-control" placeholder="收货地址">
                </div>
            </div>
        </div>
    </div>
</script>


<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js(123123)}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js"></script>

<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>

<script type="text/javascript" th:inline="javascript">
    const deliverUri = /*[[@{/order/deliver}]]*/  "deliver.html";
    const rebatesUri = /*[[@{/order/detail/rebates}]]*/  "rebate_list";
</script>


<script>

    let auctionModal = $("#receivingInfo_modal").modal("修改收货地址", function () {
        let userName = $("#receivingInfo_userName").val();
        let telNumber = $("#receivingInfo_telNumber").val();
        let detailInfo = $("#receivingInfo_address").val();
        let provinceCode = $("#sltProvince").val();
        let cityCode = $("#sltCity").val();
        let districtCode = $("#sltDistrict").val();
        let provinceName = $("#sltProvince").find("option:selected").text();
        let cityName = $("#sltCity").find("option:selected").text();
        let countyName = $("#sltDistrict").find("option:selected").text();
        let orderId = $("#hdDealOrderId").val();
        let requestData = {
            userName: userName,
            telNumber: telNumber,
            detailInfo: detailInfo,
            provinceCode: provinceCode,
            cityCode: cityCode,
            districtCode: districtCode,
            provinceName: provinceName,
            cityName: cityName,
            countyName: countyName,
            orderId: orderId
        };
        hot.ajax("/order/update/shipAddress", requestData, function (apiResult) {
            if (apiResult.resultCode === 2000) {
                hot.tip.success("设置成功", function () {
                    window.location.reload();
                });
            } else {
                hot.tip.error(apiResult.resultMsg);
            }
        }, function () {
        }, "post", 300);
    });

    let orderHandler = {
        init: function () {
            let that = this;
            $("#sltProvince").change(function () {
                that.initCity(this.value, "#sltCity");
            });

            $("#sltCity").change(function () {
                that.initCity(this.value, "#sltDistrict");
            })
        },

        initCity(pid, domId, callback) {
            let that = this;
            that.cities(pid, function (data) {
                let html = '<option value="0">请选择</option>';
                $.each(data, function (i, item) {
                    html += '<option value="' + item.id + '">' + item.name + '</option>';
                });
                $(domId).html(html);
                if (typeof callback == 'function') {
                    callback();
                }
            });
        },

        modifyShipAddress: function () {
            let that = this;
            auctionModal.show(function () {
                $("#receivingInfo_userName").val($("#hdShipUserName").val());
                $("#receivingInfo_telNumber").val($("#hdShipTelNumber").val());
                that.initCity(0, "#sltProvince");
                that.init();
            });
        },
        cities(pid = 0, callback) {
            hot.ajax("/order/cities", {
                pid: pid
            }, function (apiResult) {
                if (apiResult.resultCode === 2000) {
                    callback(apiResult.data);
                }
            }, function () {
            }, "get");
        },
        rebates: function (orderItemId, productName) {
            hot.iframeModal(rebatesUri + "?orderItemId=" + orderItemId, "1000px", "500px", productName + '的佣金和货款');
        }
    }

</script>

</body>

</html>
